<template>
    <el-card>
        <option-btn 
            :parent-course-data="parentCourseData" 
            :child-course-data="childCourseData" 
            :wordWrite="wordWriterEntity" 
            :writeStatus="writeStatus" 
            @updateCourseChange="updateCourseChange"
            @start="start"/>
        <hr/>
        <word-writer-component 
            :recordType="recordType" 
            :wordsList="startWordList" 
            :isShow="!writeStatus" 
            :recordId="startRecordId"
            @execute="execute" ref="dcx"/>
        <word-data
            :form-definition="wordDictationTitle"
            :write-status="writeStatus"
            :data="wordDictationData"
            :error-data="errorWords"
            @getErrorData="getErrorData"
            @reviver="reviverErrorWords"
        />
        <!-- 数据分页 -->
    <page 
        :total="dataTotal" 
        :currentPage="wordDictationSearch.currentPage"  
        @pageSizeChange="pageSizeChange" 
        @currentPageChange="currentPageChange" />

    </el-card>
</template>

<script>
import optionBtn from './writeOptionBtn.vue';
import { wordWriterEntity,wordDictationTitle,wordDictationSearch } from './entity/wordWriterEntity';
import { startWords,endWords,getCourseTreeApi,getWordResult,getErrorWords,wordReviver } from '@/api/words/wordApi';
import page from "@/components/common/page.vue";
import wordWriterComponent from './wordWriter.vue';
import wordData from './wordData.vue';
export default{
    components:{optionBtn,wordWriterComponent,wordData,page},
    data(){
        return {
            wordWriterEntity,
            writeStatus: true,
            startRecordId:0,//考试记录ID
            startWordList:[],
            recordType:"",
            //渲染主课程的数据
            parentCourseData:[],
            //渲染子课程的数据
            childCourseData:[],
            //考试结果数据格式
            wordDictationTitle,
            //考试结果数据结果
            wordDictationData:[],
            //考试结果搜索对象
            wordDictationSearch,
            //错误单词数据
            errorWords:[],
            //搜索条数
            dataTotal:10,

        }
    },
    methods:{
        start(){
            this.writeStatus = !this.writeStatus;
            this.recordType = this.wordWriterEntity.dictType;
            startWords(this.wordWriterEntity).then(data=>{
                this.startRecordId = data.dictRecordId;
                this.startWordList = data.wordsEntities;
                this.$refs.dcx.nextWord();
            }).catch(err =>{
                this.$message.error(err);
            })
        },
        nextWord(){
            this.$refs.dcx.nextWord();
        },
        //获取父课程树（数据）
        getCourseTree(){
            getCourseTreeApi().then(data=>{
                this.parentCourseData = data.map(item=>({value:item.courseId,label:item.courseName}));
            }).catch(err=>{
                this.$message.error(err);
            })
        },
        //课程发生变更,获取子课程树(数据)
        updateCourseChange(parentId){
            getCourseTreeApi().then(data=>{
                let result = data.find(node=>node.courseId == parentId);
                if(result && result.child && result.child.length > 0){
                    this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                }
            }).catch(err=>{
                this.$message.error(err);
            })
        }, 
        //执行提交考试结果
        execute(result){
            let query = {
                dictRecordId:this.startRecordId,
                recordList:result
            }
            endWords(query).then(data=>{
                this.getDictationResult();
                this.writeStatus = !this.writeStatus;
                this.$message.success("提交成功");
            }).catch(err=>{
                this.$message.error(err);
            })
        },
        //获取考试记录
        getDictationResult(){
            getWordResult(this.wordDictationSearch).then(data=>{
                this.wordDictationData = data.result;
            }).catch(err=>{
                this.$message.error(err);
            });
        },
        //获取错误单词
        getErrorData(id){
            getErrorWords(id).then(data=>{
                this.errorWords = data;
            }).catch(err=>{
                this.$message.error(err)
            })
        },
        //错误不熟练单词重新考试
        reviverErrorWords(row){
            console.log(row)
            this.writeStatus = !this.writeStatus;
            this.recordType = row.dictType;
            wordReviver(row.dictRecordId).then(data=>{
                this.startRecordId = data.dictRecordId;
                this.startWordList = data.wordsEntities;
                this.$refs.dcx.nextWord();
            }).catch(err=>{
                this.$message.error(err);
            })
        },
        //页面大小变更-事件
        pageSizeChange(pageSize) {
            this.wordDictationSearch.pageSize = pageSize;
            this.getDictationResult();
        },
        //当前页变更-事件
        currentPageChange(currentPage) {
            this.wordDictationSearch.currentPage = currentPage;
            this.getDictationResult();
        },
    },
    mounted(){
        this.getCourseTree();
        if(this.wordWriterEntity.courseParentId){
            getCourseTreeApi().then(data=>{
                let result = data.find(node=>node.courseId == this.wordWriterEntity.courseParentId);
                if(result && result.child && result.child.length > 0){
                    this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                }
            }).catch(err=>{
                this.$message.error(err);
            })
        };
        this.getDictationResult();

    }


}
</script>

<style lang="scss" scoped>

</style>